<template>
	<view class="message-container " >
		<u-navbar class="navbar" :background="{'background':'#F8F8F8'}" :border-bottom="false" :title="title" :title-size="36" :title-bold="true" :title-color="textColor">
		</u-navbar>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" ref="scrollDiv" class="message-list u-p-35" :refresher-enabled="!noMore" :refresher-threshold="60" refresher-background="#f8f8f8" :show-scrollbar="false" 
		@refresherpulling="refresherpulling" @refresherrefresh="refresherrefresh" scroll-with-animation="true"   :scroll-into-view="scrollIntoView" :refresher-triggered="triggered" :scroll-anchoring="true"	>
			<!-- <p class="u-text-center u-m-b-20"  v-if="noMore&&messageList.length !== 0">以下是全部的消息了~</p> -->
			<view class="message-item"  v-for="item in messageList" :key="item.id" :id="'scroll'+item.id">
				<view class="message-item-date">{{ disabledDate(item.pushTime )}}</view>
				<view class="message-item-info">
					<view class="message-item-top u-p-30">
						<view class="message-item-title"  v-if="item.title">
							{{item.title}}
						</view>
						<view class="message-details" v-if="item.contentType === 1">{{item.content}}</view>
						<view class="message-details-list" v-if="item.contentType === 6">
							<view class="message-details-item u-flex"  v-for="(child,index) in JSON.parse(item.content)" :key="index">
								<view class="message-details-name" v-if="child.isVisible"> {{child.key}}</view>
								<view class="message-details-info u-flex" v-if="child.isVisible">
									<view class=""  v-if="child.icon!== ''&&child.icon" >
										<image :src="child.icon" mode="" class="message-details-icon"></image>
									</view>
									<view class="message-details-text" :style="{fontWeight:child.isBolder?'bold':'none',color:child.colorHex}">
										{{child.value||'无'}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="message-item-bot">查看订单</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	export default{
		data(){
			return{
				title:'',
				scrollHeight:systemInfo.statusBarHeight+44,
				pageIndex:1,
				pageSize:5,
				messageType:0,
				messageList:[],
				noMore:false,
				triggered:true,
				scrollHeight:0,
				scrollTop:0,
				scrollIntoView:'',
			}
		},
		onLoad(options) {
			if(options.type == 0){
				this.title = '订单消息'
			}
			if(options.type == 1){
				this.title = '系统消息'
			}
			this.messageType = Number(options.type);
		},
		created(){
			this.getMessageList();
		},
		methods:{
			refresherpulling(e){
				// console.log(e);
			},
			refresherrefresh(){
				console.log(2);
				if(!this.noMore){
					this.triggered = true;
					this.pageIndex++;
					this.getMessageList('refresh')
				}else{
					this.triggered = false;
				}
				
			},
			scroll(e){
				// console.log(e);
			},
			// 时间格式化 前一天和当前时间
			disabledDate(time) {
				var date = new Date(time).getDate();
				var now = new Date().getDate();
				if (date < now) {
					return this.$fui.dateFormatter(time,'y-m-d h:i');
				} else {
					return this.$fui.dateFormatter(time,'hh:MM');
				}
			},
			// 获取消息列表
			async getMessageList(type){
				let params = {
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					messageType:this.messageType
					
				};
				const res = await this.$newHttp.get('api/Message/GetNotificationsByUser', { params: params } );
				if(res.code === 200){
					if (this.pageIndex > 1) {
						this.messageList.unshift(...res.data.list);
					} else {
						this.messageList = res.data.list;
					}
					if(type == 'refresh'){
						this.triggered = false;
					}
					if (res.data.list.length < this.pageSize) {
						this.noMore = true;
						this.triggered = false;
					}
					this.scrollHeight = this.$refs.scrollDiv ? this.$refs.scrollDiv.scrollHeight : 0
					if (this.pageIndex === 1) {
						// 首次渲染后获取scrollHeight并滑动到底部。
							// let currScrollHeight = this.$refs.scrollDiv.scrollHeight
							// this.$refs.scrollDiv.scrollTo(0, currScrollHeight)
							console.log(this.$refs.scrollDiv);
						this.$nextTick(function() {
							this.scrollTop = this.$refs.scrollDiv.scrollHeight;
						});
						this.scrollIntoView = 'scroll'+this.messageList[this.messageList.length-1].id;
						// console.log(this.scrollIntoView);
					} else {
						// 滚动到加载前的位置
							let currScrollHeight = this.$refs.scrollDiv.scrollHeight
							this.$refs.scrollDiv.scrollTo(0, currScrollHeight - this.scrollHeight)
							this.$nextTick(function() {
								this.scrollTop = currScrollHeight - this.scrollHeight;
							});
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.message-container{
		height: 100%;
		// flex-direction: column;
		.message-list{
			border: 1px solid red;
			box-sizing: border-box;
			// flex:1;
			height:calc(100%-44rpx);
			white-space:nowrap;
			.message-item{
				margin-bottom: 40rpx;
				.message-item-date{
					text-align: center;
					margin-bottom: 30rpx;
					color: #666;
				}
				.message-item-info{
					background-color: #fff;
					border-radius: 10rpx;
					.message-item-top{
						.message-item-title{
							font-size: 28rpx;
							color: #999;
							margin-bottom: 30rpx;
						}
						.message-details-list{
							.message-details-item{
								margin-bottom: 10rpx;
								.message-details-name{
									min-width: 118rpx;
									font-size: 28rpx;
									color: #999;
									margin-right: 20rpx;
								}
								.message-details-info{
									.message-details-icon{
										width: 32rpx;
										height: 32rpx;
										border-radius: 50%;
										margin-right: 12rpx;
									}
									.message-details-text{
										font-size: 28rpx;
										color: #333;
									}
								}
							}
						}
					}
					.message-item-bot{
						text-align: center;
						box-sizing: border-box;
						padding: 30rpx 0;
						border-top: 1px solid #eaeaea;
						font-size: 28rpx;
						color: #999;
					}
				}
				
			}
		}
	}
</style>